<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45dfff}
	#c1 {background-color: #fff;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');
	/*
		像素2：
				1) createImageData(w, h)		创建新图像
					生成新的像素矩阵，初始值是全透明黑色(0,0,0,0)
	 */
	 	var oImg = oGC.createImageData(100, 100);

	 	for (var i = 0; i < oImg.width * oImg.height; i++) {	//可以直接用width和height
	 		oImg.data[4*i] = 255;
	 		oImg.data[4*i + 1] = 0;
	 		oImg.data[4*i + 2] = 0;
	 		oImg.data[4*i + 3] = 255;
	 	};

	 	oGC.putImageData(oImg, 200, 200);
	}
	</script>
</head>
<body>
	<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>